<template>
  <!-- 修改文章 -->
  <div id="article-upd">

    <div class="div-breadcrumb">
      <el-card>
        <el-row>
          <el-col :span="24">
            <div class="grid-content bg-purple-dark">
              <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/statistics/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/article/' }">文章管理</el-breadcrumb-item>
                <el-breadcrumb-item>新增文章</el-breadcrumb-item>
              </el-breadcrumb>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </div>

    <div class="center-upd-form">
      <el-card :body-style="{ padding: '20px'}">
        <el-form :inline="false" :model="updForm" class="upd-form">
          <el-form-item label="文章id" :label-width="formLabelWidth" hidden>
            <el-input v-model="updForm.id" placeholder="文章id"></el-input>
          </el-form-item>
          <el-form-item label="标题" :label-width="formLabelWidth">
            <el-input v-model="updForm.title" placeholder="文章标题"></el-input>
          </el-form-item>
          <el-form-item label="分类" :label-width="formLabelWidth">
            <el-select v-model="updForm.categoryId" placeholder="文章分类">
              <el-option v-for="item in articleCategoryList" :key="item.id" :value="item.id" :label="item.name">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="标签" :label-width="formLabelWidth">
            <el-select v-model="updForm.tagIds" multiple placeholder="请选择标签">
              <el-option v-for="item in tagList" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="作者" :label-width="formLabelWidth">
            <el-input v-model="updForm.author" placeholder="文章作者"></el-input>
          </el-form-item>
          <el-form-item label="封面图片" :label-width="formLabelWidth">
            <el-input v-model="updForm.cover" placeholder="封面图片地址"></el-input>
          </el-form-item>
          <el-form-item label="简介" :label-width="formLabelWidth">
            <el-input v-model="updForm.shortLine" placeholder="文章简介"></el-input>
          </el-form-item>
          <el-form-item label="内容（富文本）" :label-width="formLabelWidth">
            <div>
              <div id="editorElement"></div>
            </div>
          </el-form-item>

          <el-form-item label="修改时间" :label-width="formLabelWidth" hidden>
            <el-input v-model="updForm.updateTime" placeholder="修改时间"></el-input>
          </el-form-item>
          <el-form-item style="text-align: center;">
            <el-button @click="handlerUpdCancel()">返 回</el-button>
            <el-button type="primary" @click="handlerUpdSubmit()">修 改</el-button>
          </el-form-item>
        </el-form>

      </el-card>
    </div>

  </div>

</template>
<script>
import {
    articleUpdate,
    articleDeletes,
    articleCategoryQueryList,
    articleTagList
} from '@/api/article'

import {
    Message
} from 'element-ui'
import E from 'wangeditor'

export default {
    name: 'article-upd',
    data () {
        return {
            editor: null,
            formLabelWidth: '120px',
            articleCategoryList: [],
            tagList: [],
            updForm: {
                id: null,
                title: null,
                author: null,
                cover: null,
                shortLine: null,
                content: null,
                categoryId: null,
                tagIds: null
            },
            pagination: {
                current: 1,
                size: 10,
                total: 0
            }
        }
    },
    methods: {
        // 编辑提交
        handlerUpdSubmit (id) {
            let params = {
                id: this.updForm.id,
                title: this.updForm.title,
                author: this.updForm.author,
                shortLine: this.updForm.shortLine,
                cover: this.updForm.cover,
                content: this.editor.txt.html(),
                categoryId: this.updForm.categoryId,
                tagIds: (this.updForm.tagIds != null && this.updForm.tagIds.length > 0) ? this.updForm.tagIds.join(
                    ',') : ''
            }
            articleUpdate(params).then((response) => {
                if (response && response.code === 200) {
                    this.updForm.id = null
                    this.updForm.title = null
                    this.updForm.author = null
                    this.updForm.shortLine = null
                    this.updForm.cover = null
                    this.updForm.content = null
                    this.updForm.categoryId = null
                    this.updForm.tagIds = null
                    Message.success({
                        message: response.message
                    })
                } else {
                    Message.error({
                        message: response.message
                    })
                    return false
                }
            })
            this.$router.push({
                path: 'article',
                query: {
                    'current': this.pagination.current,
                    'size': this.pagination.size
                }
            })
        },
        // 取消编辑
        handlerUpdCancel () {
            this.updForm.id = null
            this.updForm.title = null
            this.updForm.author = null
            this.updForm.cover = null
            this.updForm.shortLine = null
            this.updForm.content = null
            this.updForm.categoryId = null
            this.updForm.tagIds = null
            this.$router.push('/article')
        },
        initEditor () {
        // 富文本
        // 绑定div上的IDwebsiteEditorElem
            this.editor = new E('#editorElement')
            // 获取输入的内容
            this.editor.config.onchange = (html) => {
                // 打印输入的内容
                // console.log(html);
            }
            // 上传图片到服务器，base64形式
            this.editor.config.uploadImgShowBase64 = true
            // 隐藏网络图片
            this.editor.config.showLinkImg = false
            // 创建一个富文本编辑器
            this.editor.create()
            // 富文本内容
            let text = this.editor.txt.html()
            console.log(text)
        }
    },
    mounted () {
        // 分类下拉列表
        articleCategoryQueryList({
            enabled: true
        }).then((response) => {
            let data = response.data
            this.articleCategoryList = data
        })
        // 分类下拉列表
        articleTagList().then((response) => {
            let data = response.data
            this.tagList = data
        })
        this.initEditor()
        var articleId = this.$route.query.articleId

        var current = this.$route.query.current
        var size = this.$route.query.size
        this.pagination.current = current
        this.pagination.size = size

        articleDeletes({
            id: articleId
        }).then((response) => {
            if (response != null && response.code === 200) {
                var data = response.data
                this.updForm.id = data.id
                this.updForm.title = data.title
                this.updForm.author = data.author
                this.updForm.cover = data.cover
                this.updForm.shortLine = data.shortLine
                this.updForm.content = data.content
                this.updForm.categoryId = data.categoryId
                this.updForm.categoryName = data.categoryName
                this.updForm.countScan = data.countScan
                this.updForm.tagIds = (data.tagIds != null && data.tagIds !== '') ? data.tagIds.split(',') : []
                this.editor.txt.html(data.content)
            } else {
                Message.warning({
                    message: response.message
                })
            }
        })
    },
    // 销毁编辑器
    beforeDestroy () {
        this.editor.destroy()
        this.editor = null
    }
}
</script>

<style scoped>
  #article-upd {
    width: auto;
    height: auto;
    background-color: #e9eef3;
  }

  #editorElement {
    min-height: 300px;
  }

  .div-breadcrumb {
    margin: 20px 30px 0px 30px;
  }

  .center-upd-form {
    margin: 5px 30px 10px 30px;
  }

  .el-input {
    width: 300px;
  }
</style>
